<template>
  <div class="takeIn_main">
    <head-top head-title="立即参与" go-back="true"></head-top>
    <div class="takeIn_ul">
      <div class="takeIn_li" v-for="(item,index) in listArray" :key="index">
        <div class="takeIn_title">
          <span>({{index+1}}) {{item.title}}</span>
        </div>
        <div class="takeIn_content">
          <div class="h3">评分内容</div>
          <div class="content_p">
            <p v-html="item.content"></p>
          </div>
        </div>
        <div class="score_div">
          <p>满意度分值（{{item.score_range}}）</p>
          <input type="tel" v-model="item.score" placeholder="请输入评分">
        </div>
        <div class="remarks_div">
          <p>备注</p>
          <textarea name="" id="" cols="10" v-model="item.remark" rows="10" maxlength="100" placeholder="请输入您的建议(10字左右)...."></textarea>
        </div>
      </div>
    </div>
    <div class="takeIn_btn">
      <button @click="postData">确认提交</button>
    </div>
  </div>
</template>

<script>
  import headTop from '../header/Header.vue'
  import { loadUserId, loadVillageId } from '../../common/js/cache'
  import { Toast, Indicator } from 'mint-ui'
  import { getSatisfactionVote } from '../../api/satisfaction'
  import commonUrl from '../../common/js/commonUrl'
  import qs from 'qs'

  export default {
    name: 'SatisForm',
    data () {
      return {
        listArray: [], // 数据
        listId: '' // 列表id
      }
    },
    created () {
      // console.log(this.$route.params.id)
      this.listId = this.$route.params.id
      this._getSatisData(this.listId)
    },

    methods: {
      // 数据
      _getSatisData (id) {
        getSatisfactionVote(id).then(res => {
          if (res.code === 200) {
            this.listArray = res.data.satisfaction
            // console.log(this.listArray)
          }
        })
      },
      postData () {
        var dataList = this.listArray
        // dataList.map((res) => {
        //   // console.log(res.score)
        //   if (res.score === '' || res.remark === '') {
        //     Toast({
        //       message: '请务必填写完整',
        //       position: 'middle',
        //       duration: 1500
        //     })
        //     return
        //   }
        // })
        for (var i = 0; i < dataList.length; i++) {
          // console.log(dataList[i])
          if (dataList[i].score === '') {
            Toast({
              message: '评分必须填写',
              position: 'middle',
              duration: 1500
            })
            return
          } else {
            dataList[i]['userid'] = loadUserId()
            dataList[i]['areaId'] = loadVillageId()
            dataList[i]['satisId'] = this.listId
          }
        }
        console.log(dataList)
        // 提交
        const url = `${commonUrl.apihost}index.php/home/satisfaction_vote/setSatisfaction`
        Indicator.open({
          text: '提交中...',
          spinnerType: 'fading-circle'
        })
        const data = {
          content: '',
          data: dataList
        }
        this.$http.post(url, qs.stringify(data), {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(res => {
          console.log(res)
          if (res.data.code === 200) {
            Indicator.close()
            // flag  1:表示跳转0：表示不跳转
            if (res.data.data.flag === 1) {
              if (res.data.data.data.type === 'vote') {
                this.$router.replace('/home/Vote/' + res.data.data.data.id)
              } else if (res.data.data.data.type === 'voting') {
                this.$router.replace('/home/voting/' + res.data.data.data.id + '/' + res.data.data.data.can_type)
              } else if (res.data.data.data.type === 'TakeIn') {
                this.$router.replace('/home/TakeIn/' + res.data.data.data.id)
              } else if (res.data.data.data.type === 'TakeScore') {
                this.$router.replace('/home/SatisForm/' + res.data.data.data.id)
                this.$router.go(0) // 刷新
                this._getSatisfactionVote()
              }
            } else if (res.data.data.flag === 0) {
              // this.$router.go(-6)
              this.$router.replace('/home')
            }
            Toast({
              message: res.data.data.message,
              position: 'middle',
              duration: 1000
            })
          }
          if (res.data.code === 400) {
            Indicator.close()
            Toast({
              message: res.data.error,
              position: 'middle',
              duration: 2000
            })
            // this.$router.go(0)
          }
        })
      }
    },
    components: {
      headTop
    }
  }
</script>

<style lang="scss" scoped>
  .takeIn_main {
    width: 100%;
    padding-top: 40px;
    background: white;
    .takeIn_ul {
      .takeIn_li {
        padding: 10px;
        border-bottom: 1px solid #e3e9ff;
        .takeIn_title {
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          span {
            font-size: 16px;
          }
        }
        .takeIn_content {
          margin-top: 20px;
          .h3 {
            font-size: 16px;
            color: #0178DE;
            font-weight: normal;
            width: 100%;
            margin-bottom: 10px;
          }
          .content_p {
            width: 100%;
            /*overflow: hidden;*/
            /*text-overflow: ellipsis;*/
            /*display: -webkit-box;*/
            /*-webkit-line-clamp: 3;*/
            /*-webkit-box-orient: vertical;*/
            line-height: 20px;
            p {
              font-size: 14px;
              color: #898989;
              line-height: 24px;
            }
          }
        }
        .score_div {
          margin-top: 20px;
          p {
            font-size: 16px;
            color: #595959;
            margin-bottom: 10px;
          }
          input {
            outline: none;
            border-radius: 5px;
            border: 1px solid #CFCFCF;
            padding: 10px;
            font-size: 14px;
            color: #898989;
          }
        }
        .remarks_div {
          margin-top: 20px;
          p {
            font-size: 16px;
            color: #595959;
            margin-bottom: 10px;
          }
          textarea {
            resize: none;
            outline: none;
            border: 1px solid #CFCFCF;
            height: 100px;
            width: 94%;
            border-radius: 5px;
            padding: 10px;
            font-size: 14px;
            color: #898989;
          }
        }
      }
      .takeIn_li:last-child {
        border-bottom: none;
      }
    }
    .takeIn_btn {
      padding: 10px;
      button {
        width: 100%;
        height: 44px;
        background: #0078de;
        outline: none;
        border-radius: 0;
        color: #ffffff;
        font-size: 15px;
      }
    }
  }
</style>
